<template>
  <page-header-wrapper title="租户：234231029431">
    <a-card :bordered="false" title="基础信息">
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item :label="$t('tenant.name')">
          <span>{{ record.name }}</span>
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.contact')">
          <span>{{ record.name }}</span>
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.phone')">
          <span>{{ record.prefix }}</span>
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.email')">
          <span>{{ record.prefix }}</span>
        </a-form-model-item>

        <a-form-model-item :label="$t('contact.address')">
          <span>{{ record.prefix }}</span>
        </a-form-model-item>

        <a-form-model-item :label="$t('admin.account')" prop="prefix">
          <span>{{ record.prefix }}</span>
        </a-form-model-item>

        <a-form-model-item :label="$t('admin.password')">
          <span>{{ record.prefix }}</span>
        </a-form-model-item>
      </a-form-model>
    </a-card>

    <a-card style="margin-top: 24px" :bordered="false" title="用户">
      <template slot="extra">
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
      </template>

      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :showPagination="false">
        <span slot="status" slot-scope="text">
          <a-badge class="badge-size-large" :status="text | statusTypeFilter" :text="text | statusTextFilter" />
        </span>

        <span slot="action" slot-scope="text, row">
          <template>
            <span class="table-actionItem"><a @click="handleEdit(row)">编辑</a></span>
            <span class="table-actionItem">
              <a-popconfirm :title="$t('resetPwdWarning')" @confirm="handleStatusChange(row)">
                <a>{{ row.status === 0 ? '禁用' : '启用' }}</a>
              </a-popconfirm>
            </span>
            <span class="table-actionItem">
              <a-popconfirm :title="$t('resetPwdWarning')" @confirm="handleResetPwd(row)">
                <a>重置密码</a>
              </a-popconfirm>
            </span>
            <span class="table-actionItem">
              <a-popconfirm
                :title="$t('delWarning', { name: $t('tenant.tenant').toLowerCase() })"
                @confirm="handleDelete(row.id)"
              >
                <a class="link-danger">删除</a>
              </a-popconfirm>
            </span>
          </template>
        </span>
      </s-table>
    </a-card>

    <tenant-user-modal ref="tenantUserModal" />
  </page-header-wrapper>
</template>

<script>
// import { baseMixin } from '@/store/app-mixin'
import { STable } from '@/components'
import TenantUserModal from './modules/TenantUserModal'
import { getServiceList } from '@/api/manage'

const statusMap = {
  0: {
    type: 'success',
    text: '正常'
  },
  1: {
    type: 'error',
    text: '禁用'
  }
}

export default {
  name: 'TenantDetail',
  components: {
    STable,
    TenantUserModal
  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      record: {},
      tenantUserList: [],
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter)
        console.log('loadData request parameters:', requestParameters)
        return getServiceList(requestParameters).then(res => {
          return res.result
        })
      }
    }
  },

  computed: {
    columns () {
      const columns = [
        {
          title: '用户名',
          dataIndex: 'no',
          ellipsis: true
        },
        {
          title: '状态',
          dataIndex: 'status',
          ellipsis: true,
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 250,
          scopedSlots: { customRender: 'action' }
        }
      ]

      return columns
    }
  },

  filters: {
    statusTextFilter (type) {
      return (statusMap[type] || {}).text || '--'
    },
    statusTypeFilter (type) {
      return (statusMap[type] || {}).type || 'default'
    }
  },

  created () {
    console.log(this.$route.query.id)
    const { id } = this.$route.query
    this.loadTenantDetail(id)
    // this.loadTenantUsers(id)
  },

  methods: {
    loadTenantDetail (id) {},
    loadTenantUsers (id) {
      getServiceList({
        pageNo: 1,
        pageSize: 10
      }).then(res => {
        this.tenantUserList = res.result.data
        console.log(this.tenantUserList)
      })
    },

    handleAdd () {
      this.$refs.tenantUserModal.add()
    },
    handleEdit (record) {
      this.$refs.tenantUserModal.edit(record)
    },

    handleStatusChange (record) {},
    handleDelete (record) {},
    handleResetPwd (record) {}
  }
}
</script>

<style lang="less" scoped></style>
